<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { useCountStore } from '@/stores/counter.js'
import { storeToRefs } from 'pinia'

const store = useCountStore();

//直接解构会导致state失去响应性
// const {count,name} = store;

//storeToRefs:解构后仍然保持其响应性
// const {count,name} = storeToRefs(store);

//state修改
//1.直接修改： store.count

//2.store.$patch()
// function onTest() {
//   store.$patch({
//   count:store.count+1,
//   arr: [0,...store.arr,9]
// })
// }

//3.store.$patch(方法) (强烈推荐)
// function onTest() {
//   store.$patch(
//     (state)=>{
//   state.count ++;
//   state.arr.splice(2,0,3);
// })}

//state订阅 token
// store.$subscribe((mutation,state)=>{
//   console.log('state变更');
//   console.log(mutation);
// })






</script>

<template>
  <!-- <router-view></router-view> -->
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" />
    </transition>
  </router-view>
  <!-- <button @click="onTest">点击2</button>
  <button @click="store.count++">点击</button>
  {{ store.count }}  --DBC: {{ store.doubleCount }} -- name:{{ store.name }}
  <br>
  {{ store.arr }}
  <br>
  <input type="text" v-model="store.name">
  <br> -->
  <!-- {{ count }} -- name:{{ name }} -->
</template>


